<template>
  <div class="nav">
    <div class="container">

      <el-breadcrumb separator-class="el-icon-arrow-right" class="daohang">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>礼包中心</el-breadcrumb-item>
      </el-breadcrumb>

      <div>
        <div class="banner">
          <div class="center">
            <span></span>
            <span>领取中心</span>
            <br>
            <p>平&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;台:</p>
            <div>
              <router-link to="" class="skip active">全部</router-link>
              <router-link to="" class="skip">安卓</router-link>
              <router-link to="" class="skip">ios</router-link>
            </div>
          </div>

          <div class="present">
            <span></span>
            <span>当前礼包</span>
            <span>共找到<span>12</span>个</span>
            <div>

            <div>
              <a href="">
                <img src="http://app003.bacms.cn/upload/gmlogo/20190420062310.png" alt="">
                <div>
                  <p>火影：忍界究极对决独家礼包</p>
                  <p>钻石*300奈良秘药*200秋道秘药*50</p>
                  <span>剩余:100%</span>
                  <button>领取</button>
                </div>
              </a>
            </div>
            <div>
              <a href="">
                <img src="http://app003.bacms.cn/upload/gmlogo/20190420062310.png" alt="">
                <div>
                  <p>火影：忍界究极对决独家礼包</p>
                  <p>钻石*300奈良秘药*200秋道秘药*50</p>
                  <span>剩余:100%</span>
                  <button>领取</button>
                </div>
              </a>
            </div>
            </div>
          </div>
        </div>

        <div class="hot">
          <div>
            <span></span>
            <span>热门礼包</span>
          </div>
            <a class="gift">
              <span>口袋魔法精灵豪华礼包</span>
              <span>领取</span>
            </a>
        </div>


      </div>
    </div>
  </div>
</template>

<script>
  export default {
    
  }
</script>

<style lang="scss" scoped>
.nav{
  background-color: #eee;
  padding: 20px 0;

  .container{
    width: 1200px;
    margin: 0 auto;
    >div{
      margin-top:15px;
      display: flex;
      .banner{
        width: 880px;
        background-color: #fff;
        padding: 20px;
        >.center{
          padding-bottom: 10px;
          border-bottom: 1px solid #d2d2d2;

          >span:nth-child(1){
            float:left;
            width: 10px;
            height: 20px;
            margin-right: 0;
            border-left: 3px solid #e60012;
            border-bottom: 1px solid #fff;
          }
          >span:nth-child(2){
            font-size:1.5em;
            font-weight: normal;

          }
          >p{
            margin-top:30px;
            font-size:1.2em;
            display: inline-block;
          }
          >div{
            display: inline-block;

            >.skip{
              margin-left:20px;
            }
            .active{
              background-color: #f00;
              color:#fff;
              padding: 5px 15px;
            }
          }


        }

        >.present{
          >span:nth-child(1){
            display: inline-block;
            width: 5px;
            height: 16px;
            background: #ff4141;
            margin: 18px 10px 0 0;
          }
          >span:nth-child(2){
            font-size:1.5em;
          }
          >span:nth-child(3){
            float:right;
            font-size:1.1em;
            margin-top:10px;
            font-weight: normal;
            >span{
              color:#e60012;
              font-size:1.5em;
              font-weight: bolder;
              padding: 0 3px;
            }
          }
          >div{
            display: flex;
            >div{
              margin-top:20px;
              margin-right:40px;
              width:400px;
              >a{
                display: flex;
                >img{
                  height: 100px;
                  border-radius: 20px;
                }
                >div{
                  width:100%;
                  margin-left:15px;
                  >p:nth-child(1){
                    line-height: 20px;
                    font-size:16px;
                    color:#000;
                  }
                  >p:nth-child(2){
                    line-height: 45px;
                  }
                  >span:nth-child(3){
                    margin-left:20px;
                    line-height: 25px;
                  }
                  >button{
                    background-color: #f00;
                    color:#fff;
                    padding: 5px 20px;
                    float:right;
                  }
                }
              }
            }
          }
        }
      }
      .hot{
        width: 300px;
        margin-left:20px;
        background-color: #fff;
        padding: 20px;
        >div{
        padding-bottom:10px;
          >span:nth-child(1){
            float:left;
            width: 10px;
            height: 20px;
            margin-right: 0;
            border-left: 3px solid #e60012;
            border-bottom: 1px solid #fff;
          }
          >span:nth-child(2){
            font-size:1.5em;
            font-weight: normal;
          }
        }
        >.gift{
          display: inline-block;
          width:100%;
          height:50px;
          border-bottom: 1px solid #d2d2d2;
          >span:nth-child(1){
            line-height: 50px;
          }
          >span:nth-child(2){
            float:right;
            margin-top:10px;
            border:1px solid gray;
            padding:5px 10px;
            border-radius:20px;
          }
        }
      }
    }
  }
}
</style>